<template>
    <div class="common-layout">
      <!-- 使用Element UI的容器组件 -->
      <el-container class="container">
        <!-- 页眉部分，包含自定义的MyHeader组件 -->
        <el-header class="header"><MyHeader /></el-header>
  
        <el-container>
          <!-- 侧边栏部分，包含自定义的MyNav组件 -->
          <el-aside class="nav"><MyNav /></el-aside>
          <!-- 主内容区，包含自定义的MyContent组件 -->
          <el-main class="content"><MyContent /></el-main>
        </el-container>
        
      </el-container>
    </div>
  </template>
  
  <script>
  // 导入自定义的头部组件
  import MyHeader from '../components/MyHeader.vue'
  // 导入自定义的导航组件
  import MyNav from '../components/MyNav.vue'
  // 导入自定义的内容组件
  import MyContent from '../components/MyContent.vue'
  
  export default {
    components: {
      MyHeader,
      MyNav,
      MyContent
    }
  }
  </script>
  
  <style scoped>
  /* 这里可以添加局部样式 */
  </style>
  